<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>前台登录界面DaMoBike</title>
    <%--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />--%>
    <link rel="stylesheet" href="css/aaaa.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <%--<link href="css/login.css" rel="stylesheet" type="text/css" />--%>
    <style>
        .drag{
            width: 300px;
            height: 40px;
            line-height: 40px;
            background-color: #e8e8e8;
            position: relative;
            margin:0 auto;
        }
        .bg{
            width:40px;
            height: 100%;
            position: absolute;
            background-color: #75CDF9;
        }
        .text{
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            user-select: none;
        }
        .btn{
            width:40px;
            height: 38px;
            position: absolute;
            border:1px solid #ccc;
            cursor: move;
            font-family: "宋体";
            text-align: center;
            background-color: #fff;
            user-select: none;
            color:#666;
        }

        .login{
            float:left;
            width:100%;
            height: 40px;
            overflow: hidden;
            background-color:#db3d3c;
            font-size:20px;
            text-align:center;
            color : #fff;

        }
        .passwordClass{
            width: 300px;
            height: 40px;
            border: solid 1px #CCCCCC;
            margin: 20px auto 0 auto;
            background: #FFFFFF;
        }
        #password{
            width: 300px;
            height: 40px;
            border: solid 1px #CCCCCC;
            background: #FFFFFF;
        }
    </style>
</head>


<body>
<div class="wrap login_wrap">
    <div class="content">
        <div class="logo"></div>
        <div class="login_box">

            <div class="login_form">
                <div class="login_title">
                    登录
                </div>
                <form id="loginform" class="form-vertical" action="" >
                    <input type="hidden" name="op"  value="login">
                    <div class="form_text_ipt">

                        <input type="text" placeholder="用户名" class="form-control" id="accountName" name="accountName">

                    </div>
                    <div class="ececk_warning"><span>用户名</span></div>
                    <div class="passwordClass">

                        <input type="password" placeholder="密码" class="form-control" id="password" name="password">
                    </div>

                    <div class="drag">
                        <div class="bg"></div>
                        <div class="text" onselectstart="return false;">请拖动滑块验证</div>
                        <div class="btn">&gt;&gt;</div>
                    </div>


                    <div class="ececk_warning"><span>密码不能为空</span></div>
                    <div class="form_check_ipt">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="rememberPassword" id="remember" value="rememberPassword">记住密码
                            </label>
                        </div>

                    </div>
                    <div class="form_btn">
                        <input type="button" class="login" id="btn_submit" value="登 &nbsp; &nbsp; 录"></input>
                    </div>
                    <div class="form_reg_btn">
                        <span>还没有帐号？</span><a href="register.jsp">马上注册</a>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/common.js" ></script>
<script>
   //一、定义一个获取DOM元素的方法
     function getEle(selector){
         return  document.querySelector(selector);
     }
       var box = getEle(".drag"),//容器
       bg = getEle(".bg"),//背景
       text = getEle(".text"),//文字
       btn = getEle(".btn"),//滑块
       success = false,//是否通过验证的标志
       distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度（距离）

    //二、给滑块注册鼠标按下事件
    btn.onmousedown = function(e){

        //1.鼠标按下之前必须清除掉后面设置的过渡属性
        btn.style.transition = "";
        bg.style.transition ="";

        //说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。

        //2.当滑块位于初始位置时，得到鼠标按下时的水平位置
        var e = e || window.event;
        var downX = e.clientX;

        //三、给文档注册鼠标移动事件
        document.onmousemove = function(e){

            var e = e || window.event;
            //1.获取鼠标移动后的水平位置
            var moveX = e.clientX;

            //2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
            var offsetX = moveX - downX;

            //3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系
            if( offsetX > distance){
                offsetX = distance;//如果滑过了终点，就将它停留在终点位置
            }else if( offsetX < 0){
                offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置
            }

            //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
            btn.style.left = offsetX + "px";
            bg.style.width = offsetX + "px";

            //如果鼠标的水平移动距离 = 滑动成功的宽度
            if( offsetX == distance){

                //1.设置滑动成功后的样式
                text.innerHTML = "验证通过";
                text.style.color = "#fff";
                btn.innerHTML = "&radic;";
                btn.style.color = "green";
                bg.style.backgroundColor = "lightgreen";

                //2.设置滑动成功后的状态
                success = true;
                //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
                btn.onmousedown = null;
                document.onmousemove = null;

                //3.成功解锁后的回调函数
                setTimeout(function(){
                    alert('验证成功！');
                },100);
            }
        }

        //四、给文档注册鼠标松开事件
        document.onmouseup = function(e){

            //如果鼠标松开时，滑到了终点，则验证通过
            if(success){
                return;
            }else{
                //反之，则将滑块复位（设置了1s的属性过渡效果）
                btn.style.left = 0;
                bg.style.width = 0;
                btn.style.transition = "left 1s ease";
                bg.style.transition = "width 1s ease";
            }
            //只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
            document.onmousemove = null;
            document.onmouseup = null;
        }


    }
</script>


<script type="text/javascript">

    $(document).ready(function(){
        $("#btn_submit").click(function () {
            var accountName=$("#accountName").val();
            var password=$("#password").val();
            var checkbox=$("#remember").prop("checked");
            $.ajax({
                async:true,
                type:"post",
                url:"${pageContext.request.contextPath}/account/login",
                data:{
                    accountName:accountName,
                    password:password
                },
                dataType:"json",
                success:function (result) {
                    if (result==true){
                        //登陆成功
                        //判断是否记住密码
                        if (checkbox){
                            //记住密码,保存至本机缓存中localStorage
                            window.localStorage.setItem(accountName,password);
                        }else{
                            //不记住密码时，在本机缓冲中删除
                            window.localStorage.removeItem(accountName);
                        }
                        location.href="index.jsp?accountName = "+accountName;
                    }else if ((result == false)) { // 登录失败
                        // 提示
                        alert("用户名或密码错误!");
                        // 清空输入的密码
                        $("#password").val("");
                    }

                },
                error:function () {
                    alert("Ajax异步请求失败！！1");
                }
            })
        })

    })

    //对用户名输入框做一个onmouseout事件
    $("#accountName").blur(function () {
       var accountName = $("#accountName").val();
       var password = window.localStorage.getItem(accountName);
        $("#password").val(password);
    });

</script>
</body>
</html>


